<template>
	<view>
		<view class="item" >
			<view class="top">
				<view class="name">{{ address.name }}</view>
				<view class="phone">{{ address.phone }}</view>
				<view class="tag">
					<text v-if="address.is_default === 1" >默认</text>
				</view>
			</view>
			<view class="bottom">
				{{ address.province }}{{ address.city }}{{ address.county }} {{ address.address }}
				<u-icon name="edit-pen" :size="40" color="#999999" @click="goAddress"></u-icon>
			</view>
		</view>
		
		<u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">订单商品列表</u-divider>
		
		<view class="class-item" >
			<view class="u-body-item u-flex u-row-between u-p-b-0" v-for="(item, index) in cartList" :key="index" @click="goTo(item.id)">
				<image :src="item.goods.cover_url" mode="aspectFill"></image>
				<view class="title u-line-2">{{item.goods.title}}</view>
				<view class="price u-line-1">￥{{item.goods.price+'.00'}}</view>
				<view class="sales u-line-1">{{item.num}}件</view>
			</view>
		</view>
		
		<u-divider color="#fa3534" half-width="200" border-color="#6d6d6d" class="u-m-b-50">共 {{total_number}} 件商品</u-divider>
		<view class="foot">
			<view class="add">
				<u-button type="warning" class="add" @click="onSubmit">{{total_price}}元 确认支付</u-button>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" length="30%" closeable @close="close">
			<view class="content">
				<u-image width="200rpx" height="200rpx" :src="aliyun"></u-image>
			</view>	
			<view class="u-text-center">支付宝</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address:'',
				cartList:[],
				total_number: 0, //已选中的购物车商品数量
				total_price: '0.00', //购物车商品总价格
				orderNo:'',
				aliyun:'',
				show:false,
			}
		},
		onShow() {
			this.ordersRes();
		},
		methods: {
			async ordersRes() {
				const res = await this.$u.api.ordersView()
				this.cartList = res.carts
				console.log(res)
				let address = res.address.filter(n=>n.is_default == '1');
				console.log(address)
				this.address = address[0];
				if (address.length == '0'){
					this.address ={
						address:"您还没有添加收货地址",      
					}
					setTimeout(()=>{
						this.$u.route({
							type:'navigateTo',    
							url:'/pages/center/address'
						})
					},1000)
				}
				//检测是否已经生成过订单，如果是反回购物车
				        if(this.cartList.length == '0'){
							// console.log(this.cartList.length)
				            this.$u.toast('此订单已经提交')
				            this.$u.route({
				            	type:'reLaunch',    
				            	url:'/pages/cart/cart'
				            })
				        }
				this.sumTotalPrice();
			},
			// 计算添加到购物车的数量和价格
			sumTotalPrice() {
				let total_number = 0;
				let total_price = 0;
				this.cartList.forEach(item=>{
					total_price += parseInt(item.num) * parseFloat(item.goods.price) ;   //   parseInt是整数 价格转成parseFloat浮点
					total_number += parseInt(item.num)
				})
  
			    this.total_price = parseFloat(total_price).toFixed(2);
				this.total_number = total_number		
			},
			//跳转到选择地址页
			goAddress(){
				uni.navigateTo({
				    url: '/pages/center/address'
				});
			},
			//提交订单 
			async onSubmit(){
				 const params ={
					address_id:this.address.id
				}
				
				const res = await this.$u.api.createOrder(params)
				//订单ID
				this.orderNo = res.id
				//弹出支付
				this.show = true
				const data = {
					type:'aliyun'
				}
				const pay = await this.$u.api.payOrder(this.orderNo,data)
				console.log(pay)
				this.aliyun = pay.qr_code_url;
				 //轮询查看 支付状态
				const timer = setInterval(()=>{
					this.$u.api.payOrderStatus(this.orderNo).then(res=>{
						if(res=='2'){     //支付成功为2，因调不了沙箱支付，所以改成1
							clearInterval(timer);
							//跳转到订单详情页
							this.$u.route({
								type:'navigateTo',    
								url:'/pages/cart/odersdetail?id='+this.orderNo
							})
						}
					})
				},3000)
			},
			close(){
				this.$u.route({
					type:'navigateTo',    
					url:'/pages/cart/odersdetail?id='+this.orderNo
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
.foot {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: sticky;
	bottom: 30rpx;
	left: 80rpx;
	background-color: #FF9900;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;

	}
}
.item {
	padding: 40rpx 20rpx ;
	margin-left: 40rpx;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
		.tag {
			display: flex;
			font-weight: normal;
			align-items: center;
			text {
				display: block;
				width: 60rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color:rgb(49, 145, 253);
			}
			.red{
				background-color:red
			}
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.class-item:last-child {
		min-height: 100%;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.333333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.item-menu-image {
		width: 120rpx;
		height: 120rpx;
	}
	.u-body-item {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 10rpx;

		}
			
		.u-body-item image {
			width: 200rpx;
			flex: 0 0 220rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
			margin-bottom: 10rpx;

		}
	.title {
		position: absolute !important;
		margin-left: 220rpx;
		height: 200rpx;
		width: 300rpx;
		line-height: 50rpx;
		font-weight: 500;
		background: #fff;
	}	
	.price {
		position: absolute !important;
		margin-left: 240rpx;
        margin-top: 80rpx;
	}
	.sales {
		position: absolute !important;
		
		right: 30rpx;
		text-align:right ;
		
	}
	.content {
		    width: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 80rpx;

		}
</style>
